@import url('../../common.css');

.markdown-transform-html {
  font-size: 14px;
  min-height: var(--A4-height);
  padding: 20px 30px;
  .head-layout {
    position: relative;
    color: white;
    img[alt*='个人头像'] {
      width: 32mm;
      border-radius: 10px;
    }
    .flex-layout {
      justify-content: flex-start;
      .flex-layout-item {
        margin-right: 40px;
        &:last-child {
          margin-right: 0;
        }
      }
    }

    &::after {
      content: '';
      position: absolute;
      top: -25px;
      left: -30px;
      z-index: -1;
      width: calc(100% + 60px);
      height: 295mm;
      background: linear-gradient(to bottom, var(--markdown-primary-bg-color), white);
    }
    h1,
    h2 {
      margin-bottom: 15px;
    }
  }
  .main-layout {
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
    margin-top: 15px;
    background: white;
    color: var(--markdown-primary-color);
  }

  .resume-module {
    width: 100%;
    .flex-layout {
      .flex-layout-item {
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    h2 {
      position: relative;
      display: inline-block;
      font-size: 14px;
      margin: 10px 0 5px 0;
      padding: 5px 10px;
      border-bottom-left-radius: 30px;
      border-top-left-radius: 30px;
      color: white;
      background-image: linear-gradient(
        to right,
        var(--markdown-primary-bg-color) 60%,
        var(--markdown-primary-bg-color),
        white
      );
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        height: 1px;
        width: calc(210mm - 165px);
        background: var(--markdown-primary-bg-color);
        opacity: 0.3;
      }
    }

    h3 {
      color: var(--markdown-primary-bg-color);
    }
  }
  ul,
  ol {
    margin-top: 5px;
    padding-left: 20px;
  }
  i.iconfont {
    margin: 0 5px;
  }

  p {
    margin-top: 4px;
    padding-left: 5px;
  }
}
